<template>
    <div>
        <el-dialog
        title="题目预览"
        :visible="subDialogVisible"
        width="50%"
        @open="openGetSubInfo"
        @close="handleClose">

            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">【题型】：{{this.screenSubObj.questionType | number2Text(questionType)}}题</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">【编号】：{{this.screenSubObj.id}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">【难度】：{{this.screenSubObj.difficulty | number2Text(difficulty)}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">【标签】：{{this.screenSubObj.tags}}</div></el-col>
            </el-row>

            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{this.screenSubObj.subjectID | number2Text(subjectIDList) }}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：{{this.screenSubObj.catalogID | number2Text(DirectoryList)}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">【方向】：{{this.screenSubObj.direction}}</div></el-col>
            </el-row>
            <el-divider></el-divider>
            <p> 【题干】：</p>
            <div style="color:#0000ff" v-html="screenSubObj.question"></div>
            <div>
                <div v-if="screenSubObj.questionType!=='3'">{{this.screenSubObj.questionType | number2Text(questionType)}}题 选项：（以下选中的选项为正确答案）</div>

                <!-- 单选题 -->
                <div v-if="screenSubObj.questionType==='1'"  style="vertical-align: middle;">
                    <!-- 绑定的是radio，因为后台返回的数据isRight为1正确，所以在下面直接绑定0 1就行 -->
                      <el-radio-group v-model="radio">

                        <div  v-for="item in screenSubObj.options" :key="item.id" style="padding:8px 0;">
                          <el-radio :label="item.isRight" @change="change">{{item.title}}</el-radio>
                          <img style="height:200px;vertical-align: middle;" :src="item.img" alt="">
                        </div>

                    </el-radio-group>
                </div>

                <!-- 多选题 -->
                <div v-if="screenSubObj.questionType==='2'">

                    <el-checkbox-group :value="[1]">
                        <div  v-for="item in screenSubObj.options" :key="item.id" style="padding:8px 0;vertical-align: middle;">
                            <el-checkbox :label="item.isRight">{{item.title}}</el-checkbox>
                        </div>
                    </el-checkbox-group>

                </div>

            </div>
            <el-divider></el-divider>
            <el-row>
                 【参考答案】：
                 <el-button type="danger" size="small" @click="clickshowVideo">视频答案预览</el-button>
                 <div style="width:400px;height:250px;padding:10px 0;" v-if="showVideo">
                    <video autoplay="autoplay" controls="controls" :src="screenSubObj.videoURL" style="width:100%;height:100%"></video>
                 </div>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                 【答案解析】：<div style="display: inline-block;" v-html="screenSubObj.answer"></div>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                【题目备注】：{{this.screenSubObj.remarks}}
            </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleClose">关 闭</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
// 导入筛选表格部分常量
import { questionType, difficulty } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'HmmmXxxxScreenSubdialog',
  props: {
    //   dialog的显示隐藏
    subDialogVisible: {
      type: Boolean,
      required: true
    },
    // 预览题目对应的ID
    subID: {
      required: true
    },
    // 学科列表
    subjectIDList: {
      type: Array,
      required: true
    },
    // 目录简单列表
    DirectoryList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 单选框的绑定
      radio: 1,
      //   视频的显示和隐藏
      showVideo: false,
      // 题库详细数据
      screenSubObj: {},
      //   题型常量
      questionType,
      //   难度常量
      difficulty
    }
  },

  methods: {
    //   dialog关闭的方法
    handleClose () {
      this.$emit('update:subDialogVisible', false)
      // 题库详细数据
      this.screenSubObj = {}
      this.showVideo = false
    },
    // 打开dialog得到用户对应题库数据
    async openGetSubInfo () {
      const { data: res } = await detail({ id: this.subID })
      //   console.log(res)
      this.screenSubObj = res
    },
    change () {
      this.radio = 1
    },
    // 点击按钮显示视频:如果无视频就不显示视频
    clickshowVideo () {
      if (!this.screenSubObj.videoURL) return
      this.showVideo = !this.showVideo
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col{
    padding: 10px 0;
}
.el-divider{
    margin: 10px 0;
    background-color: #9a9a9a;
}
// ::v-deep .el-icon--right{
//     margin-bottom: 9px;
// }
</style>
